import { BellOutlined } from '@ant-design/icons';
import '@umijs/max';
import React, { useEffect, useState } from 'react';
import { history } from '@@/core/history';
import WebSocketService from '@/utils/WebSocketService';
import { useModel } from '@@/exports';
import { Badge, message } from 'antd';

export const SysNotification = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};

  const [isUnread, setIsUnread] = useState<boolean>(false);

  const onmessage = (data: string) => {
    setIsUnread(true);
    console.log('Received message:', data);
    message.success(data);
  };

  useEffect(() => {
    if (currentUser?.id) {
      const wsService = new WebSocketService(currentUser?.id);
      wsService.connect();
      wsService.onMessage(onmessage);
    }
  }, []);

  return (
    <div
      style={{
        display: 'flex',
        height: 26,
      }}
      onClick={() => {
        setIsUnread(false);
        history.push('/sys/notification');
      }}
    >
      <Badge dot={isUnread}>
        <BellOutlined />
      </Badge>
    </div>
  );
};
